<template>
    <div class="askItemInfo">
        <div class="infoicon">
            <van-icon :name="icon" :size="getIconSize"/>
        </div>
        <div class="label" :style="labelStyle">
            {{label}}            
        </div>
        <div class="maoHao">:</div>

         <div class="value" :class="limitContent?'':'noLimit'">{{value}}
            <slot />
         </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface AskItemInfo{
    icon?:string
    label?:string
    value?:string
    width?:number
    limitContent?:boolean
    iconSize?:number
}
const props = defineProps<AskItemInfo>();

const labelStyle = computed(()=>{
    var w =  props.width;
    if(!w) w=50;

    return {
        width:w+"px"
    }
})

const getIconSize = computed(()=>{
    if(props.iconSize){
        return props.iconSize
    }else{
        return 18
    }
})

</script>

<style lang="less" scoped >
.askItemInfo{
    padding-top: 6px;
    display: flex;
    align-items: flex-start;
    .infoicon{
        margin-right: 2px;
        margin-top: 3px;
    }
        .label{
            width: 50px;
            text-align: justify;
            text-align-last: justify;
            line-height: 25px;
            color: #777;
            font-size: 16px;
        }
       
        .value{
            width: 100px;
            flex-grow: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 16px;
            overflow: hidden;
            line-height: 25px;
        }

        .value.noLimit{
            display: block;
            
        }

        .maoHao{
            margin-left: 4px;
            margin-right: 8px;
        }

}
</style>

